<template>
    <div>
        <van-nav-bar title="搜索" left-text="返回" left-arrow @click-left="() => { $router.push('/') }" fixed />
        <div style="height: 45px;"></div>
        <van-search v-model="searchval" show-action label="新闻" placeholder="请输入搜索关键词" @search="onSearch">
            <template #action>
                <div @click="onClickButton">搜索</div>
            </template>
        </van-search>
        <div v-for="item in searchApiData" v-show="!status">
            <van-cell :title="item.goods_name" />
        </div>
        <van-empty description="描述文字" v-show="kb" />
        <div class="his" v-show="status">
            <div>
                <h4>搜索发现</h4>
                <van-tag type="primary" size="large">智利干露</van-tag>
                <van-tag type="primary" size="large">自行车</van-tag>
            </div>
            <div>
                <h4>搜索历史</h4>
                <van-tag type="primary" size="large">进口红酒</van-tag>
                <van-tag type="primary" size="large">智利干露</van-tag>
                <van-tag type="primary" size="large">自行车</van-tag>
                <van-tag type="primary" size="large">纸巾小包</van-tag>
                <van-tag type="primary" size="large">笔记本电脑包</van-tag>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { qsearchApi } from '@/api/api';
const searchval = ref('')
const kb = ref(false)
const status = ref(true)
const searchApiData = ref([])
import _ from 'lodash'
watch(searchval,_.debounce((val) => {
    if (val.length == 0) {
        kb.value = false
        status.value = true
    } else {
        status.value = false
        qsearchApi(val).then(res => {
            console.log(res);
            searchApiData.value = res.data.message
            if (res.data.message.length == 0) {
                kb.value = true
            }else{
                 kb.value = false
            }
        })
    }
},2000) )
</script>

<style lang="scss" scoped>
.his {
    div {
        .van-tag {
            margin: 5px 15px;
        }
    }
}
</style>